<template>
  <div class="talk">
    <button @click="getLoveTalk">获取一句土味情话</button>
    <ul>
      <li v-for="talk in talkList" :key="talk.id">{{ talk.title }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="LoveTalk">
import {useTalkStore} from '@/store/LoveTalk'
import {storeToRefs} from "pinia";

//页面使用数据进行解构，并且做成响应式
//`pinia`提供的`storeToRefs`只会将数据做转换，而`Vue`的`toRefs`会转换`store`中数据。
//方法不会被ref进行包裹
const {talkList} = storeToRefs(useTalkStore())
const talkStore = useTalkStore();

// 方法
function getLoveTalk() {
  talkStore.getLoveTalk()
}
</script>

<style scoped>
.talk {
  background-color: orange;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>